<template>
	<view class="">
		<view :style="{paddingTop:shh+'px'}"></view>
		<view class="flex-ju-b pt30 con">
			<uni-icons @click="back()" type="left" size="22" color="#000"></uni-icons>
			<view @click="$refs.cang.open()" class="flex-a-i size24 borderECEDEE ra20 pg5-20">
				{{tindex==0?'隐藏讲解':tindex==1?'隐藏单词':'完整显示'}}
				<image mode="widthFix" class="flex image width32 ml10 mt5" src="/static/xiangxia.png"></image>
			</view>
			<view class="width40"></view>
			<!-- <image @click="navto('/pages/search')" mode="widthFix" class="flex image width40" src="/static/sou.png"></image> -->
		</view>
			<swiper :current="nextindex" next-margin="35px" previous-margin="35px" class="swiperc" @change="changewoor">
				<swiper-item v-for="(item,index) in warrid" :key="index">
					<view class="flex-ju-c swiperc">
						<view  class="bgfff ra50 pg30 swipers">
							<view v-if="current == index" >
								<view class="flex-ju-b ">
									<view>{{current+1}}/{{warrid.length}}</view>
									<view class="flex-a-i">
										<view @click="$refs.upbiji.open()" class="flex-a-i size24 bgf9f9f9 ra20 pg5-20">
											<image mode="widthFix" class="flex image width28 mr10" src="/static/biji.png"></image>笔记
										</view>
										<view @click="tapopen" class="flex-a-i size24 bgf9f9f9 ra20 pg5-20 ml30">
											<image mode="widthFix" class="flex image width28 mr10" :src="info.isCollect?'/static/xings.png':'/static/xing.png'"></image>
										 收藏
										</view>
									</view>
								</view>
								<view class="" v-if="tindex!=1||isdan">
									<view class="flex-ju-c size72 bold mt50">{{info.word}}</view>
									<view class="flex-ju-c size24 mt30 mb20">
										<view class="flex-a-i">
											<view @click="voice(info.ukUrl)" class="flex-a-i size24 bgf9f9f9 ra20 pg5-20 mr10">
												{{info.ukPhonetic}}<image mode="widthFix" class="flex image width22" src="/static/yuyin.png"></image>
											</view>
											<view @click="voice(info.usUrl)" class="flex-a-i size24 bgf9f9f9 ra20 pg5-20 ml10">
												{{info.usPhonetic}}<image mode="widthFix" class="flex image width22" src="/static/yuyin.png"></image>
											</view>
										</view>
									</view>
								</view>
								<view v-else @click="isdan=true" class="color666 size24 flex-ju-c pt110 pb110">
									点击显示单词
								</view>
								
								<scroll-view @click="isjie=true" scroll-y class="dongs">
									<view v-if="tindex!=0||isjie" class="size28  flex-ju-c " style="line-height: 25px;">
										<mp-html :content="info.explanation"></mp-html>
									</view>
									<view v-else  class="color666 size24 flex-ju-c pt280">
										点击显示讲解
									</view>
								</scroll-view>
								
								<view @click="navto('words_detail?id='+info.wordId)" class="flex-row flex size24 color3D3D3D">
									<view>详细释义 
									<uni-icons type="right" size="12" color="#3D3D3D"></uni-icons>
									</view>
								</view>
								<view @click="navto('/pages/chat_ai?value='+info.word+'有哪些常见搭配？')" class="bgFFF2F4 ra30 flex-a-i size24 color666 pg10-20 mt15">
									<image mode="widthFix" class="flex image width109 mr10" src="/static/wenai.png"></image> "{{info.word}}"有哪些常见搭配？
								</view>
						</view>
						</view>
					</view>
				</swiper-item>
				
			</swiper>
			<add ref="add" @collection="collection" type="1" :wordId="wordId"></add>
			<uni-popup ref="cang" type="bottom" background-color="#fff" border-radius="20px 20px 0px 0" >
				<view class=" size28" :style="{paddingBottom:bhh+'px'}">
					<view @click="taplist(0)" class="flex-ju-c border-bECEDEE height100">隐藏讲解</view>
					<view @click="taplist(1)" class="flex-ju-c border-bECEDEE height100">隐藏单词</view>
					<view @click="taplist(2)" class="flex-ju-c  height100">完整显示</view>
					<view @click="$refs.cang.close()" class="flex-ju-c  height100 color666 pt30" style="border-top:8px solid #F0F2F5;">取消</view>
				</view>
			</uni-popup>
			<uni-popup type="bottom" ref="upbiji" background-color="#fff" border-radius="20px 20px 0px 0">
				<view class="con pt40 " :style="{paddingBottom:bhh+'px'}">
					<view class="flex-ju-b">
						<view class="size36 bold">
							笔记
						</view>
						<view @click="$refs.upbiji.close()">
							<uni-icons type="closeempty" size="20"></uni-icons>
						</view>
					</view>
				<view  class="bgFFF2F4 pg25-20 ra20 mt30 con">
					<view class="flex-ju-b border-bECEDEE pb30">
						<view class="size28 bold">添加笔记</view>
						<view @click="tapupimg" class="flex-a-i size24 ra10 pg1-15" style="background: rgba(19,28,37,0.08);">
							<uni-icons size="20" type="camera"></uni-icons>图片
						</view>
					</view>
					<view class="posire">
						<textarea class="size28 pt20 pb50 width1000" auto-height maxlength="-1" v-model="note" placeholder="在这里写下你的笔记" placeholder-style="color:#898D92"></textarea>
						<image mode="widthFix" src="/static/jiao.png" class="image width44 right-20 bottom-25 posiab"></image>
						<view class="flex-a-i flex-wrap">
							<view v-for="(item,d) in images" :key="d" class="posire width190 mr20 mb20">
								<image  :src="item" class="image wh190-190 ra20"></image>
								<view @click="tapclose(d)" class="wh42-42 ra42 flex-ju-c posiab top10 right10" style="background: rgba(19,28,37,0.5);">
									<uni-icons color="#fff" type="closeempty"></uni-icons>
								</view>
							</view>
						</view>
						<view class="flex-ju-c">
							<view @click="tapaddnote" class="flex-ju-c colorfff size28 ra20 bg000 wh200-70">提交</view>
						</view>
					</view>
					</view>
			</view>
			</uni-popup>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				images:[],
				isdan:false,
				isjie:false,
				tindex:0,
				info:{},
				warrid:[],
				nextindex:0,
				note:"",
				current:"",
				wordId:""
			}
		},
		onLoad(option) {
			this.wordId = option.id
			this.getdata(option.id)
			
			if(option.warrid){
				 this.warrid=option.warrid.split(',')
				 this.nextindex = this.warrid.indexOf(option.id)
				 this.current =this.nextindex
				 uni.setStorageSync('record',{
					type:2,
					rootId: this.wordId
				 })
			}
		},
		mounted() {
			
		},
		methods: {
			collection(){
				this.info.isCollect=1
				this.toast('收藏成功')
				var pages = getCurrentPages();
				var page = pages[pages.length - 2];
				page.$vm.iscetion=true
			},
			tapopen(){
				if(this.info.isCollect==1){
					this.http('/api/folder_favorite_relation/cancel',{
						entryId:this.wordId,
						type:1
					}).then(res=>{
						this.toast('已取消')
						this.info.isCollect=0
						var pages = getCurrentPages();
						var page = pages[pages.length - 2];
						page.$vm.iscetion=true
					})
				}else{
					this.$refs.add.open(1)
				}
			},
			tapaddnote(){
				if(this.note){
					this.http('/api/note/add',{
						isWordOrRoot:1,
						entryId:this.wordId,
						note:this.note,
						images:this.images
					},'post').then(res=>{
						this.note=''
						this.images=[]
						this.toast('提交成功，审核中...')
						this.$refs.upbiji.close()
					})
				}else{
					this.toast('输入笔记内容')
				}
			},
			tapupimg(){
				 if(this.images.length>8){
				 	this.toast('最多9张图')
				 	return
				 }
				this.upimg(9).then(res=>{
					res.map(item=>{
						this.images.push(item)
					})
				})
			},
			tapclose(index){
				this.images.splice(index,1)
			},
			getdata(wordId,current){
				this.http('/api/word/learning',{
					wordId
				}).then(res=>{
					this.info = res.data
					setTimeout(()=>{
						if(current||current==0){
							this.current = current
						}
					},200)
				
				})
			},
			changewoor(e){
				if(this.tindex==0){
					this.isjie=false
				}else if(this.tindex==1){
					this.isdan=false
				}else{
					this.isdan=true
					this.isjie=true
				}
				
				this.wordId=this.warrid[e.detail.current]
				this.getdata(this.warrid[e.detail.current],e.detail.current)
				
				uni.setStorageSync('record',{
					type:2,
					rootId: this.warrid[e.detail.current]
				})
			},
			taplist(index){
				this.tindex = index
				if(index==0){
					this.isjie=false
				}else if(index==1){
					this.isdan = false
				}
				this.$refs.cang.close()
			}
		}
	} 
</script>

<style>
	.swiperc{
		height:calc(100vh - 200rpx);
	}
	
	.swipers{
		width: 77vw;
		height:calc(100vh - 339rpx);
	}
	.dongs{
		height:calc(100vh - 800rpx);
	}
page{
	background: #f9f9f9;
}
</style>
